<template>
	<view>
		<view class="punchClockTop boxShow">
			<view class="title mb20">
				<view class="head-icon head-pre-month"@click="pre"><text></text></view>
				<view class="flex align-center fwight f16">{{month}}月汇总<u-image src="../../static/images/clock_03.png" mode=""  style="width: 30rpx;height: 30rpx;margin-left: 20rpx;"></u-image></view>
				<view class="head-icon head-next-month" @click="next"><text></text></view>
			</view>
			<view class="typeMonth flex">
				<view class="punchAtten">
					<view class="fwight f18">12</view>
					<view>出勤（天）</view>
				</view>
				<view class="punchAtten">
					<view class="fwight f18">12</view>
					<view>迟到（天）</view>
				</view>
				<view class="punchAtten">
					<view class="fwight f18">12</view>
					<view>早退（天）</view>
				</view>
				<view class="punchAtten">
					<view class="fwight f18">5</view>
					<view>旷工（天）</view>
				</view>
				<view class="punchAtten">
					<view class="fwight f18">2</view>
					<view>休息（天）</view>
				</view>
				<view class="punchAtten">
					<view class="fwight f18">0</view>
					<view>请假（天）</view>
				</view>
				<view class="punchAtten">
					<view class="fwight f18">0</view>
					<view>外出（天）</view>
				</view>
				
			</view>
		</view>
		<view class="punchClockBottom boxShow">
			<lunc-calendar ref="lc" :showLunar="false" :showMonthBg="false" :shouChangeBtn="false" firstDayOfWeek="sunday"
			  :weekend="false" :signList="signList" @dayChange="dayChange" @monthChange="monthChange">
			</lunc-calendar>
		</view>
		<uni-popup ref="popup" :type="type" :animation="false" :maskClick="true" @change="change">
			<view style="background-color: #fff;" class="flexBox">
				<view class="flex boxTop">
					<view class="titleYear">{{dayEvent.date}}</view>
					<view class="" @click="closeBox"><image src="../../static/images/check1.png" mode=""style="width: 15px;height: 15px;"></image></view>
				</view>
				<view class="boxBottom">
					<view class="flex align-center">
						<image src="../../static/images/clock_07.png" mode=""style="width: 20px;height: 20px; margin-right: 10px;"></image>
						<view>上班：{{dayEvent.startTime}} {{dayEvent.startType}}</view>
					</view>
					<view class="flex align-center">
						<image src="../../static/images/clock_11.png" mode=""style="width:20px;height:20px; margin-right: 10px"></image>
						<view>下班：{{dayEvent.endTime}}  {{dayEvent.endType}}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'center',
				dayEvent:{
					
				},
				month:'',
				signList: [ 
					{
						date: '2021-11-3',
						title: '.',
						color:'blue',
						startTime:'09:00',
						startType:'正常',
						endTime:'18:00',
						endType:'异常',
					},
					{
						date: '2021-11-4',
						title: '.',
						color:'pink',
						startTime:'09:00',
						startType:'正常',
						endTime:'19:00',
						endType:'异常',
					},
				],
			}
		},
		onLoad() {
			var date = new Date();
			this.month = date .getMonth()+1;
		},
		 methods: {			 
		    dayChange(dayInfo) {
		      // console.log(JSON.parse(JSON.stringify(dayInfo)));
			  if(Object.keys(dayInfo.daySign).length != 0){
				   this.$refs.popup.open();
				   this.dayEvent = dayInfo.daySign;
			  }
		    },
			change(){
				
			},
			closeBox(){
				this.$refs.popup.close();
			},
		    monthChange(monthInfo) {
			  this.month = monthInfo.month;
		      // console.log(JSON.parse(JSON.stringify(monthInfo)));
		    },
			pre(){
				let c=this.$refs.lc;
				// console.log(c.tranIndex)//021
				let num = c.tranIndex - 1 < 0 ? 2 : c.tranIndex - 1;
				c.changeMonth({detail:{current:num}})
				this.$refs.popup.close();
				
			},
			next(){
				let c=this.$refs.lc;
				// console.log(c.tranIndex)   //201
				let num = c.tranIndex + 1 > 2 ? 0 : c.tranIndex + 1;
				c.changeMonth({detail:{current:num}})
				this.$refs.popup.close();
			}
		  }
	}
</script>

<style scoped lang="scss">
.punchClockTop,.punchClockBottom{
	margin: 40rpx;
	padding: 30rpx;
	.title{
		display: flex;
		justify-content: space-between;
		.head-icon {
			width: 60rpx;
			text-align: center;
			align-items: center;
			justify-content: center;
			text {
				display: inline-block;
				width: 20rpx;
				height: 20rpx;
				border-top: 4rpx solid #AAA;
				border-left: 4rpx solid #AAA;
			}
		}
		.head-pre-month {
			transform: rotate(-45deg);
		}
		.head-next-month {
			transform: rotate(135deg);
		}
	}
	.typeMonth{
		flex-wrap: wrap;
		justify-content: space-between;
		.punchAtten{
			width: 180rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;
		}
	}
}
.flexBox{
	width: 500rpx;
	border-radius: 30rpx;
	.boxTop{
		justify-content: space-between;
		font-size: 18px;
		padding: 30rpx;
		border-bottom: 1px solid #81CFFB;
	}
	.boxBottom{
		padding: 30rpx;
		font-size: 18px;
		view:first-child{
			margin-bottom: 30rpx;
		}
	}
}
</style>
